<script>
import ExpandableText from "../../components/expandable-text/index.vue";
export default {
  name: "TextOpenClose",
  components: {
    ExpandableText,
  },
  data() {
    return {
      text: "浮动元素是如何定位的\n<br />正如我们前面提到的那样，当一个元素浮动之后，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。<br /><br />要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。",
    };
  },
};
</script>

<template>
  <div class="w">
    <h1>多行文本展开收起示例</h1>
    <div class="block">
      <h2>全兼容版本（IE10+、Safari、Firefox、Chrome、Edge）</h2>
      <div class="wrapper">
        <input id="exp1" class="exp" type="checkbox" />
        <div class="text">
          <label class="btn" for="exp1"></label>
          浮动元素是如何定位的
          正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
          在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。
        </div>
      </div>

      <div class="wrapper">
        <input id="exp2" class="exp" type="checkbox" />
        <div class="text">
          <label class="btn" for="exp2"></label>
          浮动元素是如何定位的
          正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
        </div>
      </div>
    </div>
    <div class="block">
      <expandable-text class="wrapper" maxLines="5">
        <p>
          1.形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。
        </p>
        <p>2.三楼的看法</p>
        啦收到反馈速度发
      </expandable-text>
      <h3>【\n, br换行】</h3>
      <expandable-text
        class="wrapper"
        :text="text"
        maxLines="5"
        expandText="打开"
        collapseText="收起"
      ></expandable-text>

      <h3>packages组件</h3>
      <w-expandable-text
        class="wrapper"
        :text="text"
        maxLines="5"
        expandText="打开"
        collapseText="收起"
      ></w-expandable-text>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  width: 500px;
  display: flex;
  //   margin: 50px auto;
  //   width: 800px;
  //   overflow: hidden;
  //   /*   resize: horizontal; */
  //   border-radius: 8px;
  //   padding: 15px;
  //   box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
// .text {
//   font-size: 20px;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   text-align: justify;
//   /* display: flex; */
//   /*   display: -webkit-box;
//   -webkit-line-clamp: 3;
//   -webkit-box-orient: vertical; */
//   position: relative;
//   line-height: 1.5;
//   max-height: 4.5em;
//   transition: 0.3s max-height;
// }
// .text::before {
//   content: "";
//   height: calc(100% - 26px);
//   float: right;
// }
// .text::after {
//   content: "";
//   width: 999vw;
//   height: 999vw;
//   position: absolute;
//   box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
//   margin-left: -100px;
// }
// .btn {
//   position: relative;
//   float: right;
//   clear: both;
//   margin-left: 20px;
//   font-size: 16px;
//   padding: 0 8px;
//   background: #3f51b5;
//   line-height: 24px;
//   border-radius: 4px;
//   color: #fff;
//   cursor: pointer;
//   /* margin-top: -30px; */
// }
// .btn::after {
//   content: "展开";
// }
// .exp {
//   display: none;
// }
// .exp:checked + .text {
//   max-height: none;
// }
// .exp:checked + .text::after {
//   visibility: hidden;
// }
// .exp:checked + .text .btn::before {
//   visibility: hidden;
// }
// .exp:checked + .text .btn::after {
//   content: "收起";
// }
// .btn::before {
//   content: "...";
//   position: absolute;
//   left: -5px;
//   color: #333;
//   transform: translateX(-100%);
// }
</style>
